<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>label:first-child {
            width: 100px;
            display: inline-block;
            text-align: right;
        }
    </style>
</head>

<body>
    <form>
        <div>
            <label>账号：</label>
            <!-- value：设置输入框的默认值 -->
            <!-- placeholder：设置输入框的提示文字 -->
            <input type="text" placeholder="请输入账号">
        </div>

        <div>
            <!-- 表单标签的id属性，和label标签的for属性，值一样时，可以将它们关联起来，
                 点击文字，就等同于点击表单标签  -->
            <label for="pwd">密码：</label>
            <input type="password" id="pwd" placeholder="请输入密码">
        </div>

        <div>
            <label>性别：</label>
            <!-- checked：设置当前单选框默认选中 -->
            <input type="radio" name="gender" id="man"><label for="man">男</label>
            <input type="radio" name="gender" id="woman" checked><label for="woman">女</label>
        </div>

        <div>
            <label>兴趣爱好：</label>
            <!-- checked：设置当前复选框默认选中 -->
            <input type="checkbox"><label for="">吃饭</label>
            <input type="checkbox" checked><label for="">睡觉</label>
            <input type="checkbox" checked><label for="">打豆豆</label>
        </div>
        <div>
            <label>城市：</label>
            <!-- selected：设置当前option默认选中 -->
            <select>
                <option value="">四川</option>
                <option selected value="">云南</option>
                <option value="">贵州</option>
            </select>
        </div>
        <div>
            <label for="">留言：</label>
            <!-- rows：设置显示的文字行数、cols：设置一行显示的文字个数（不完全精确） -->
            <textarea rows="5" cols="30"></textarea>
        </div>
        <div>
            <!-- 设置一个空白label，来让button标签和上面的表单标签左右对齐 -->
            <label></label>
            <button>保存</button>
        </div>
    </form>
</body>

</html>